import React from 'react';
import MainUI from '../../components/layout/MainUI';
import ChartCard from '../../components/charts/ChartCard';
import Bar from '../../components/charts/Bar';
import Linechart from '../../components/charts/Linechart';
import {connect} from 'dva';
import styles from './css/workspance.less';
import styles2 from './css/dashboard.less';

import {
  Breadcrumb,
  Row, Col, Icon, Card, Avatar,Tabs, Tooltip,Form,
} from 'antd';

const { TabPane } = Tabs;
class ServiceDayMoney extends React.Component {

  state = {
    currentTab:'sales',
    qMonth:'oneMonth',
  };
  search = () => {

  };
  componentWillMount=()=>{
    if(this.props.dashBoard.adminCount===null||this.props.dashBoard.adminCount===undefined){
      this.props.dispatch({
        type: 'finance/e_getDashBoard'
      });
    }
    if(this.props.dayMoneys.length===0){
      this.props.dispatch({
        type: 'finance/e_getDayMoneyCharts'
      });
    }
  };

  isActive=(type)=>{
    if(type===this.state.qMonth){
      return styles2.currentDate;
    }else if(type===this.state.qMonth){
      return styles2.currentDate;
    }else if(type===this.state.qMonth){
      return styles2.currentDate;
    }else if(type===this.state.qMonth){
      return styles2.currentDate;
    }else{
      return null;
    }

  };
  selectDate=(v)=>{
    const state=this.state;
    state.qMonth=v;
    this.setState(state);
    this.props.dispatch({
      type: 'finance/e_getDayMoneyCharts',
      payload:{range:v}
    });
  };

  render() {
    const topColResponsiveProps = {
      xs: 24,
      sm: 12,
      md: 12,
      lg: 12,
      xl: 6,
      style: { marginBottom: 24 },
    };
    const salesExtra = (
      <div className={styles2.salesExtraWrap}>
        <div className={styles2.salesExtra}>
          <a className={this.isActive('oneMonth')} onClick={() => this.selectDate('oneMonth')}>
            近一月
          </a>
          <a className={this.isActive('threeMonth')} onClick={() => this.selectDate('threeMonth')}>
            近三月
          </a>
          <a className={this.isActive('sixMonth')} onClick={() => this.selectDate('sixMonth')}>
            近六月
          </a>
          <a className={this.isActive('year')} onClick={() => this.selectDate('year')}>
            近一年
          </a>
        </div>
      </div>
    );
    const loginInfo=JSON.parse(window.sessionStorage.getItem("loginInfo"));
    return (
      <MainUI>
        <Breadcrumb style={{margin: '12px 0'}}>
          <Breadcrumb.Item>功能管理</Breadcrumb.Item>
          <Breadcrumb.Item> 统计面板</Breadcrumb.Item>
        </Breadcrumb>
        <div style={{padding: 24, background: '#f0f2f5', minHeight: 360}}>
          <Row>
            <Col span={12}>
            <div className={styles.pageHeaderContent}>
              <div className={styles.avatar}>
                <Avatar size="large" src={loginInfo.photo} />
              </div>
              <div className={styles.content}>
                <p className={styles.contentTitle}>你好，{loginInfo.name}，祝你开心每一天！</p>
                <p>{loginInfo.merchantName} | {loginInfo.merchantAddress}</p>
              </div>
            </div>
            </Col>
            <Col span={12}>
            <div className={styles.pageHeaderExtra}>
              <div>
                <p>员工总数</p>
                <p>{this.props.dashBoard.adminCount==null?'0':this.props.dashBoard.adminCount}</p>
              </div>
              <div>
                <p>会员总数</p>
                <p>{this.props.dashBoard.customerCount==null?'0':this.props.dashBoard.customerCount}</p>
              </div>
            </div>
            </Col>
          </Row>
          <Row style={{marginTop:30}}>

            <Col {...topColResponsiveProps}>
              <ChartCard
                bordered={true}
                title="总交易数"
                action={<Tooltip title="总共服务或交易的总次量"><Icon type="info-circle-o" />说明</Tooltip>}
                total={this.props.dashBoard.orderCount==null?'0':+this.props.dashBoard.orderCount}
                contentHeight={38}
              >
              </ChartCard>
            </Col>
            <Col {...topColResponsiveProps}>
              <ChartCard
                bordered={true}
                title="会员总余额"
                action={<Tooltip title="所有会员充值卡中的余额总数"><Icon type="info-circle-o" />说明</Tooltip>}
                total={this.props.dashBoard.allCustomerAmount==null?'0':'￥ '+this.props.dashBoard.allCustomerAmount}
                contentHeight={38}
              >

              </ChartCard>
            </Col>
            <Col {...topColResponsiveProps}>
              <ChartCard
                bordered={true}
                title="总收入"
                action={<Tooltip title="会员卡付款和用户现金付款的总数"><Icon type="info-circle-o" />说明</Tooltip>}
                total={this.props.dashBoard.allPayAmount==null?'0':'￥ '+this.props.dashBoard.allPayAmount}
                contentHeight={38}
              >

              </ChartCard>
            </Col>
            <Col {...topColResponsiveProps}>
              <ChartCard
                bordered={true}
                title="总支出"
                action={<Tooltip title="商家向其他商家或客户或员工等的付款总数"><Icon type="info-circle-o" />说明</Tooltip>}
                total={this.props.dashBoard.allExitAmount==null?'￥ 0':'￥ '+this.props.dashBoard.allExitAmount}
                contentHeight={38}
              >
              </ChartCard>
            </Col>
          </Row>
          <Card
            bordered={false}
            bodyStyle={{ padding: 0 }}
          >
            <div className={styles2.salesCard}>
              <Tabs tabBarExtraContent={this.state.currentTab==='sales'?salesExtra:null} onChange={(v)=>{
                const state=this.state;
                state.currentTab=v;
                this.setState(state);
                if(this.props.monthMoneys.length===0){
                  this.props.dispatch({
                    type: 'finance/e_getMonthMoneyCharts'
                  });
                }
              }}  size="large"  tabBarStyle={{ marginBottom: 24 }}>
                <TabPane tab="日交易" key="sales">
                  <Row>
                    <Col xl={24} lg={12} md={12} sm={24} xs={24}>
                      <div className={styles2.salesBar}>
                        <Linechart
                          height={300}
                          data={this.props.dayMoneys}
                          title='日交易趋势(元)'
                        />
                      </div>
                    </Col>
                  </Row>
                </TabPane>
                <TabPane tab="月交易" key="views">
                  <Row>
                    <Col xl={24} lg={12} md={12} sm={24} xs={24}>
                      <div className={styles2.salesBar}>
                        <Bar
                          height={300}
                          title="月交易额趋势(元)"
                          data={this.props.monthMoneys}
                        />
                      </div>
                    </Col>
                  </Row>
                </TabPane>
              </Tabs>
            </div>
          </Card>
        </div>
      </MainUI>
    )
  };
}

function mapStateToProps(state) {
  return {
    dashBoard: state.finance.dashBoard,
    dayMoneys: state.finance.dayMoneys,
    monthMoneys: state.finance.monthMoneys,
  }
}

export default connect(mapStateToProps)(Form.create()(ServiceDayMoney));
